<template>
  <div class="org">
    <div class="form">
      <div class="keyword">
        <div class="input-box">
          <p class="form-text">赛事名称:</p>
          <el-input placeholder="请输入赛事名称关键字进行搜索" clearable v-model="inputVal"></el-input>
        </div>
        <div class="search">
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </div>

      <!-- <div class="look">
        <el-button type="primary" @click="toMatchList">查看已报名赛事</el-button>
      </div> -->
    </div>

    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%;" border>
        <el-table-column prop="idNum" label="ID" width="50"></el-table-column>
          <el-table-column prop="mechanism" label="机构" width="200"></el-table-column>
        <el-table-column prop="competitionName" label="赛事名称"></el-table-column>
        <el-table-column prop="referee" label="裁判长" width="90"></el-table-column>
        <el-table-column prop="time" label="比赛时间" width="160"></el-table-column>
        <el-table-column prop="endTime" label="报名截止时间" width="160"></el-table-column>
        <el-table-column prop="state" label="状态" width="120">
          <template slot-scope="scope">
            <span :style="{color:scope.row.state=='可报名'?'green':'orange'}">{{scope.row.state}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="options" label="操作" width="180">
          <template slot-scope="scope">
            <span @click="goSignUp(scope.row.idNum) " :style="{color:'#409eff',cursor: 'pointer'}">{{scope.row.options.sign}}</span><span> | </span>
            <span @click="goSignList(scope.row.idNum)"  :style="{color:'#409eff',cursor: 'pointer'}">{{scope.row.options.info}}</span>
           </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal:'',
      tableData: []
    };
  },
  created() {
    this.getMatchList();
  },
  methods: {
    goSignUp(id) {
      this.$router.push(`/Index/group/${id}`);
    },
    goSignList(id){
      let com_id = id
      this.$router.push('/Index/signList?com_id='+com_id);
    },
    toMatchList() {
      let com_id = 
      this.$router.push("/Index/matchList");
    },
    search(){
      this.getMatchList()
    },
    async getMatchList() {
      try{
        let result = await this.$axios.post(
        "/TeamSign/com_list",
        {
          search: this.inputVal
        },
        {
          headers: {
            token: window.sessionStorage.getItem("token")
          }
        }

      );
			this.$message({
				message:result.data.message,
				type:'success'
			})
      console.log(result.data.data);
      let tableData=[];
      result.data.data.forEach((item) => {
        tableData.push({
            idNum: item.id,
            mechanism: item.get_club.get_user.name,
            competitionName: item.name,
            referee: item.get_ref.get_user.name,
            time: item.start_time,
            endTime: item.end_time,
            state: "可报名",
            options: {
              sign:"报名",
              info:"查看报名信息"
            }
            
        })
      });
      //  tableData=result.data.data
       this.tableData=tableData
      }catch(err){
				this.$message({
					message:err,
					type:'error'
				})
         throw new Error(err);
      }


    }
  }
};
</script>

<style lang="less" scoped>
.org {
  margin-top: 36px;
  padding-left: 46px;
  width: 90%;
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .form {
    display: flex;
    // margin-left: 26px;
    margin-bottom: 12px;
    justify-content: space-between;

    .keyword {
      width: 450px;
      display: flex;
      align-items: center;

      .input-box {
        width: 100%;
        display: flex;
        align-items: center;
      }
      .form-text {
        width: 90px;
      }
    }

    .state {
      width: 200px;
    }

    .search {
      width: 123px;
      text-align: right;
    }
  }
  .table {
    margin-top: 50px;
  }
}

</style>
